<template>
  <div class="van-cell van-cell--clickable">
    <van-icon class="home-icon" :name="icon" />
    <div class="van-cell__title">
      <span class="cell__title">{{ leftTitle }}</span>
    </div>
    <div class="van-cell__value" @click="toMoreProject">
      <span class="cell__more">{{ rightTitle || '更多' }}</span>
    </div>
    <i
      class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon"
    ></i>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
interface Props {
  icon: string
  leftTitle: string
  router: string
  rightTitle?: string
}

const router = useRouter()

const props = defineProps<Props>()

const toMoreProject = () => {
  router.push({
    name: props.router,
  })
}
</script>

<style lang="less" scoped>
.van-cell {
  align-items: center;
}

.home-icon {
  margin-right: 5px;
}

.cell__title {
  font-size: 15px;
  color: #0387cf;
}

.cell__more {
  font-size: 12px;
  color: #828282;
}
</style>
